<script lang="ts" setup>
import ModeAdmin from "./Components/ModeAdmin.vue";
import ModeMessage from "./Components/ModeMessage.vue";
import ModePasswd from "./Components/ModePasswd.vue";

import mainEmit from "@/utils/bus";
import mainStore from "@/store";
import commonHooks from "@/hooks/common";
import router from "@/router";
import { ref, onBeforeUnmount } from "vue";
import { CommonApi } from "@/Api";

const store = mainStore();
const hooks = commonHooks();

// 登录页获取是否存在用户
const { data } = await (async () => await CommonApi.CheckAdmin())();

// 当前
const modeIndex = ref(1);
const modeText = ref("账号密码登录");
const nextTest = ref("短信登录");
const content_dom = ref();
const hasUser = ref<boolean>(true);

function animationAction(action: () => void) {
   // 设置动画，开始翻转切换
   content_dom.value.style = "animation: cardFilp 0.5s;";
   // 翻转中,更换内容
   setTimeout(action, 250);
   // 翻转结束
   setTimeout(() => {
      // 清除过渡
      content_dom.value.style = "";
   }, 500);
}

async function checkAdmin() {
   try {
      const { code, data } = await CommonApi.CheckAdmin();
      if (code === 200) {
         hasUser.value = data.hasUser;
      } else {
         hasUser.value = false;
      }
   } catch (error) {
      hasUser.value = true;
   }
}

function adminSignIn() {
   modeIndex.value = 0;
   modeText.value = "管理员注册";
   hasUser.value = false;
}

function modeChange() {
   modeIndex.value = modeIndex.value === 1 ? 2 : 1;
   modeText.value = modeText.value === "短信登录" ? "账号密码登录" : "短信登录";
   nextTest.value = modeText.value === "短信登录" ? "账号密码登录" : "短信登录";
}

mainEmit.on("loginResult", data => {
   store.setStoreItems(data);
   hooks.addRoutes();
   // router.addRoute();

   router.push({ name: "main" });
});

onBeforeUnmount(() => {
   mainEmit.off("loginResult");
});
</script>

<template>
   <div class="login">
      <div ref="content_dom" class="content">
         <div class="contentTable">
            <div class="change">
               <span>
                  <span class="addAdmin" v-if="!hasUser && modeIndex != 0" @click="animationAction(adminSignIn)">
                     <el-icon><CaretLeft /></el-icon>
                     管理员注册
                  </span>
               </span>
               <span class="button" v-if="modeIndex != 0" @click="animationAction(modeChange)">
                  {{ nextTest }}
                  <el-icon><CaretRight /></el-icon>
               </span>
            </div>
            <span class="title">
               江苏社科进修大学
               <br />
               小程序后台管理系统
               <br />
               {{ modeText }}
            </span>
            <div class="form">
               <ModeAdmin v-if="modeIndex === 0" />
               <ModePasswd v-else-if="modeIndex === 1" />
               <ModeMessage v-else />
            </div>
         </div>
      </div>
   </div>
</template>

<style lang="scss" scoped>
.login {
   width: 100vw;
   height: 100vh;
   overflow: auto;
   min-width: 1200px;
   min-height: 600px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-image: url(../../../assets/images/book.jpg);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   color: #ffffff;

   .content {
      width: 400px;
      height: 550px;
      // border-radius: 10px;
      position: relative;
      // transition: all 0.5s;
      // overflow: hidden;

      &::before {
         content: "";
         position: absolute;
         width: 100%;
         height: 100%;
         z-index: 0;
         background-color: rgba($color: #000000, $alpha: 0.3);
         backdrop-filter: blur(2px);
         border-radius: 20px;
      }
   }

   .contentTable {
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
      position: relative;
      .change {
         width: 100%;
         height: 45px;
         box-sizing: border-box;
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         justify-self: flex-start;
         padding-inline: 15px;
         z-index: 1;
         font-size: 13px;

         .button,
         .addAdmin {
            color: #ffffff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            transition: all 0.3s;
            position: relative;
            user-select: none;

            &::after {
               content: "";
               width: calc(100% + 5px);
               height: 2px;
               transform: rotateY(90deg);
               background-color: #409eff;
               position: absolute;
               bottom: -3px;
               left: -2.5px;
               transition: all 0.3s;
            }

            &:hover {
               &::after {
                  transform: rotateY(0deg);
               }
            }
         }
      }

      .title {
         display: block;
         width: 100%;
         padding-block: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 22px;
         text-align: center;
         line-height: 30px;
      }

      .form {
         width: 100%;
         height: calc(100% - 125px);
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 10;
         box-sizing: border-box;
         padding-inline: 30px;
      }
   }
}
</style>
